<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style>
			.box{
				width: 300px;
				height: 500px;
				border: 4px solid pink;
				/* 2.绑定动画 */
				/* animation: 动画名称  持续时间  次数;
				infinite:无限的
				linear：匀速
				 */
				animation: sf 4s infinite linear/* (次数) */;
			}
			/* 1.创建关键帧 
				from:开始帧
				to：结束帧
			*/
			
			@keyframes sf{
				/* from{		/* 开始帧 */
				/* 	width: 200px;
					height: 200px;
					background-color: lightyellow;
					transform: rotate(0);
				}
				to{			 结束帧 
					width: 100px;
					height: 100px;
					background-color: lightpink;
					transform: translate(200px,300px) rotate(240deg); }*/
				
				0%{/* 百分比：时间节点 
					0%，30%：持续一段时间
				*/
					width: 200px;
					height: 200px;
					background-color: lightyellow;
					transform: rotate(0);
				}
				30%{
					width: 100px;
					height: 100px;
					background-color: lightpink;
					transform: translate(200px,300px) rotate(240deg);
				}
				60%{
					width: 500px;
					height: 500px;
					background-color: aquamarine;
					border-radius: 100%;
				}
			}
			@-webkit-keyframes sf
				from{}
				to{}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
